<template>
  <div class="con">
    <twoHead title="歌手详情"></twoHead>
    <div
      class="topbg"
      :style="'background:url(' + picUrl + ') no-repeat center'"
    ></div>
    <div class="mask"></div>
    <div class="rtop">
      <div class="pic">
        <img :src="picUrl" alt="" />
      </div>
      <p class="r-tit">{{ name }}</p>
    </div>
    <div class="btm">
      <div class="btm-tit" @click="playList(0)">
        <div class="btm-l">
          <van-icon name="play-circle" size="24" color="#f00" />
          <h5>播放热门</h5>
          <span class="btm-count">({{ 50 }})</span>
        </div>
        <div class="btm-r">
          <van-icon name="down" size="24" />
          <van-icon name="passed" size="24" />
        </div>
      </div>
      <div class="btm-con" v-if="show">
        <div
          class="btm-con-item"
          @click="playList(index)"
          v-for="(v, index) in list"
          :key="index"
        >
          <p class="btm-con-item-num">
            <van-icon
              class="s-icon"
              color="#c20c0c"
              v-if="current == index && lxx"
              name="volume-o"
            />
            <span v-else>{{ index + 1 }}</span>
          </p>
          <div class="btm-con-item-info">
            <h5 class="van-ellipsis">{{ v.txt }}</h5>
            <p class="van-ellipsis">{{ v.name }}</p>
          </div>
          <van-icon name="share-o" size="18" />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState,mapMutations } from "vuex";

export default {
  data() {
    return {
      id: this.$route.params.id,
      name: this.$route.params.name,
      picUrl: this.$route.params.picUrl,
      ids:[],
      songids:[],
      list:[],
      show:false,
      lxx:false,
    };
  },
  computed:{
    ...mapState(['current','first'])
  },
  methods:{
    ...mapMutations(['setList','setSxy','setCurrent','setShowPlayer']),
    playList(i){
      this.setSxy(true);
      this.lxx = true;
      this.setList(this.list);
      this.setCurrent(i);
      this.setShowPlayer(true)
    }
  },
  mounted() {
    this.$ajax.getSingerMusic({ id: this.id }).then((res) => {
      res.songs.forEach(item=>this.ids.push(item.id));
            this.$ajax.getMusic({ids:this.ids.join(',')}).then(res=>{
        res.songs.forEach(item=>this.songids.push(item.id));
        res.songs.forEach((item,i)=>{
          this.list[i]={txt:item.name,pic:'',name:'',url:''};
          this.list[i].pic = item.al.picUrl.replace(/^\/\d\.jpg$/,item.al.pic_str);
          item.ar.forEach(value=>{
            this.list[i].name +=  value.name+'/';
          })
          this.list[i].name = this.list[i].name.slice(0,this.list[i].name.length-1)
        })

        this.$ajax.getMusicUrl({id:this.songids.join(',')}).then(res=>{
          res.data.forEach(item=>{
            this.songids.forEach((value,i)=>{
              if(value == item.id){
                this.list[i].url = item.url;
                this.show = true;
              }
            })
          })

        })
      })
    });
  },
};
</script>

<style lang="scss" scoped>
.con{
    padding-top: 46px;
    position: relative;
}
.van-ellipsis {
  width: 90%;
}
.btm {
  position: absolute;
  z-index: 1;
  width: 100%;
  background: #fefefe;
  color: #000;
  padding-bottom: 45px;
  &-con {
    padding: 10px 20px;
    &-item {
      h5 {
        font-weight: normal;
      }
      p {
        color: #666;
      }
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align-last: left;
      &-num {
        font-size: 16px;
        color: #999;
      }
      &-info {
        width: 80%;
      }
    }
  }
  h5 {
    font-size: 14px;
  }
  &-count {
    font-size: 12px;
    color: #999;
  }
  &-tit {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
  }
  &-l {
    width: 35%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-r {
    width: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.topbg {
  width: 100%;
  height: 100%;
  filter: blur(15px);
  position: absolute;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
}
.rtop {
  position: relative;
  padding: 40px 20px;
  width: 100%;
  height: 40%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .pic {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
        width: 125%;
    }
  }
  .r-tit {
    margin-top: 10px;
    font-size: 18px;
    color: #fff;
    letter-spacing: 5px;
  }
}
</style>